<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格排序</title>
    <link rel="stylesheet" href="css/font.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        table {
            margin-left: 50px;
            min-width: 400px;
            border-collapse:collapse;
            border: 1px solid #e2e2e2;
        }
        table td {
            padding: 5px 10px;
        }
        thead tr {
            width: 600px;
            /*border: 1px solid #333;*/
        }
        thead > tr > td {
            background: #333;
            color: #fff;
        }
        table td {
            width: 100px;
        }
        .icon-desc,
        .icon-asc {
            color: #8e8e8e;
        }
        [data-direction = 'desc'] > .icon-asc {
            display: none;
        }
        [data-direction = 'asc'] > .icon-desc {
            display: none;
        }
        .sorting {
            color: #fff;
        }
        .fixed {
            position: fixed;
            top: 0;
            margin-left: -1px;
        }
    </style>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><table>
    <thead id="thead">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>
                数学
            </td>
            <td>英语</td>
            <td>英语2</td>
            <td>英语3</td>
            <td>英语4</td>
            <td>总分</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>4</td>
            <td>英语2</td>
            <td>3</td>
            <td>语4</td>
            <td>啊</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>100</td>
            <td>100</td>
            <td>60</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>好</td>
        </tr>
        <tr>
            <td>小紫</td>
            <td>93</td>
            <td>95</td>
            <td>5</td>
            <td>332</td>
            <td>433</td>
            <td>24</td>
            <td>要</td>
        </tr>
        <tr>
            <td>小花</td>
            <td>93</td>
            <td>95</td>
            <td>5</td>
            <td>332</td>
            <td>433</td>
            <td>24</td>
            <td>能粉娃娃粉</td>
        </tr><tr>
            <td>小花</td>
            <td>93</td>
            <td>95</td>
            <td>5</td>
            <td>332</td>
            <td>433</td>
            <td>24</td>
            <td>能粉娃娃粉</td>
        </tr><tr>
            <td>小花</td>
            <td>93</td>
            <td>95</td>
            <td>5</td>
            <td>332</td>
            <td>433</td>
            <td>24</td>
            <td>能粉娃娃粉</td>
        </tr><tr>
            <td>小花</td>
            <td>93</td>
            <td>95</td>
            <td>5</td>
            <td>332</td>
            <td>433</td>
            <td>24</td>
            <td>能粉娃娃粉</td>
        </tr><tr>
            <td>小花</td>
            <td>93</td>
            <td>95</td>
            <td>5</td>
            <td>332</td>
            <td>433</td>
            <td>24</td>
            <td>能粉娃娃粉</td>
        </tr><tr>
            <td>小花</td>
            <td>93</td>
            <td>95</td>
            <td>5</td>
            <td>332</td>
            <td>433</td>
            <td>24</td>
            <td>能粉娃娃粉</td>
        </tr><tr>
            <td>小花</td>
            <td>93</td>
            <td>95</td>
            <td>5</td>
            <td>332</td>
            <td>433</td>
            <td>24</td>
            <td>能粉娃娃粉</td>
        </tr><tr>
            <td>小花</td>
            <td>93</td>
            <td>95</td>
            <td>5</td>
            <td>332</td>
            <td>433</td>
            <td>24</td>
            <td>能粉娃娃粉</td>
        </tr><tr>
            <td>小花</td>
            <td>93</td>
            <td>95</td>
            <td>5</td>
            <td>332</td>
            <td>433</td>
            <td>24</td>
            <td>能粉娃娃粉</td>
        </tr>
    </tbody>
</table>
<div>
    <div></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>

<script src="js/jquery-1.11.3.js"></script>
<script src="js/sort.js"></script>
<script src="js/fix-head.js"></script>
<script>
    $('thead').sort({
        index: [1,2,3,5,6],
        thead: '#thead',
        tbody: 'tbody',
        // 设置初始为灰色，点击后的默认排序和设置的才相同
        way: ['asc','desc']
    });
    $('table').fixedRow({
       thead: '#thead'
    });
</script>
</html>